SlidingPaneLayout详解

SlidingPaneLayout详解

作者:李旺成
时间:2016年5月25日


简介

SlidingPaneLayout 可能很多人都没用过,但这并不是一个新控件。SlidingPaneLayout 是 Support V4 包中提供的,2013 年 Google I/O 大会期间更新的。

先来看看这个 SlidingPaneLayout 到底是什么?

官方介绍

了解一个控件,一般习惯先看它的继承结构和官方介绍:

SlidingPaneLayout类

继承自 ViewGroup,那说明这是个容器。继续看文档,我们可以了解到:
SlidingPaneLayout 是一个水平的多层的布局控件,左侧或者第一个子视图是它的导航视图,其他的是内容视图。其实,这就是一个左滑菜单的官方实现。

直接看看怎么使用吧!

简单使用

先看效果:

简单使用

上面介绍的时候说了,这就是一个容器,水平的多层的布局控件,那好就往里面放控件就好了,试试:

在布局中使用:activity_simpleuse1.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/spl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".simple.SimpleUse2Activity">
<TextView
android:id="@+id/tv_left"
android:layout_width="120dp"
android:layout_height="match_parent"
android:text="左侧菜单"
android:textSize="22sp"
android:background="#ff0000"/>
<TextView
android:id="@+id/tv_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="这是内容"
android:textSize="24sp"
android:background="@color/colorPrimaryDark"/>
</android.support.v4.widget.SlidingPaneLayout>

好了,直接运行起来,对,就是上面动图的效果。

结合 Fragment

一般做侧滑菜单都会使用 Fragment 来解耦菜单和详情页面,当然 SlidingPaneLayout 也支持这样使用。

结合Fragment使用

在布局中使用:activity_simpleuse2.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/spl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".simple.SimpleUse2Activity">
<fragment
android:id="@+id/fragment_leftmenu"
android:name="com.diygreen.slidingpanelayoutdemo.simple.LeftMenuFragment"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="left"/>
<fragment
android:id="@+id/fragment_rightcontent"
android:name="com.diygreen.slidingpanelayoutdemo.simple.RightContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="right"/>
</android.support.v4.widget.SlidingPaneLayout>

在 Java 代码中使用:SimpleUse2Activity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
public class SimpleUse2Activity extends AppCompatActivity implements
LeftMenuFragment.BookMarkListener, SlidingPaneLayout.PanelSlideListener {


private SlidingPaneLayout mRootSPL;
private LeftMenuFragment mLeftFragment;
private RightContentFragment mRightFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simpleuse2);

initView();
initListener();
}

private void initView() {
mRootSPL = (SlidingPaneLayout) findViewById(R.id.spl_root);
mLeftFragment = (LeftMenuFragment) getFragmentManager().findFragmentById(R.id.fragment_leftmenu);
mRightFragment = (RightContentFragment) getFragmentManager().findFragmentById(R.id.fragment_rightcontent);
}

private void initListener() {
mRootSPL.setPanelSlideListener(this);
mLeftFragment.setListener(this);
}

@Override
public void onChangeBookMark(String bookMark) {
mRightFragment.setContent(bookMark);
}

@Override
public void onPanelSlide(View panel, float slideOffset) {
}

@Override
public void onPanelOpened(View panel) {
mLeftFragment.setHasOptionsMenu(true);
}

@Override
public void onPanelClosed(View panel) {
mLeftFragment.setHasOptionsMenu(false);
}
}

在这个 Activity 里面使用的两个 Fragment 很简单了,这里就不贴代码了,有兴趣的去源码里面看吧!

滑动关闭 Activity

上面用了两个小实例介绍了 SlidingPaneLayout 的简单使用,下面看看进阶的用法。

iOS 7 提供了一个比较人性化的体验:手势滑动返回。Android 并不没有原生支持该功能,但是,当时刚出先这个效果的时候,就有大牛开源了一个库用于在 Android 上滑动返回。这里我们可以不借助这个开源库,利用 SlidingPaneLayout 就可以实现这个效果。

先看效果:

滑动关闭Activity

思路分析

说明,这不是我想出来的,我只是在这里做一个简单的介绍。

1、效果分析
我们分析一下滑动关闭的效果:就是随着手势右移,当前 Activity 的窗口整个向右移动,而其左侧滑出的区域可以看到下面的 Activity。

2、关于左滑菜单
有没有感觉这和一些左滑菜单很像,只是它的左侧“菜单”是透明的,而且可以覆盖整个屏幕。

3、实现思路
那好,可以这样,用一个透明的全屏布局作为左侧菜单,这样就可以看到当前 Activity 下面的 Activity了;然后,当菜单全部打开的时候关闭当前 Activity,这样就可以实现左滑关闭的效果了。

编码实现

1、实现透明 Activity
为什么要用透明 Activity?不知道的可以参考一下这篇文章:Hacks控件篇-Hack7 移除背景以提升Activity启动速度

先定义透明 Activity 的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style name="DIY.SlideClose.Transparent.Theme" parent="AppTheme">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@style/DIY.Animation.SlidingBack</item>
<item name="android:actionBarStyle">@style/DIYActionBar.Custom</item>
</style>

<style name="DIYActionBar.Custom" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="displayOptions">showCustom</item>
<item name="android:background">@android:color/transparent</item>
<item name="background">@android:color/transparent</item>
<item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>
<item name="android:height">?actionBarSize</item>
</style>

<style name="DIY.Animation.SlidingBack" parent="@android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:activityOpenExitAnimation">@anim/slide_out_right</item>
<item name="android:activityCloseEnterAnimation">@anim/slide_in_right</item>
<item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperOpenExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperCloseEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperCloseExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperIntraOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperIntraOpenExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperIntraCloseEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperIntraCloseExitAnimation">@anim/slide_out_right</item>
</style>

然后,使用样式:

1
2
3
4
<activity
android:name=".slideclose.NextActivity"
android:label="NextActivity"
android:theme="@style/DIY.SlideClose.Transparent.Theme" />

2、实现可以滑动删除的基类 Activity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
public class BaseSlideCloseActivity extends AppCompatActivity implements
SlidingPaneLayout.PanelSlideListener {


@Override
protected void onCreate(Bundle savedInstanceState) {
initSlideBackClose();
super.onCreate(savedInstanceState);
}

private void initSlideBackClose() {
if (isSupportSwipeBack()) {
SlidingPaneLayout slidingPaneLayout = new SlidingPaneLayout(this);
// 通过反射改变mOverhangSize的值为0,
// 这个mOverhangSize值为菜单到右边屏幕的最短距离,
// 默认是32dp,现在给它改成0
try {
Field overhangSize = SlidingPaneLayout.class.getDeclaredField("mOverhangSize");
overhangSize.setAccessible(true);
overhangSize.set(slidingPaneLayout, 0);
} catch (Exception e) {
e.printStackTrace();
}
slidingPaneLayout.setPanelSlideListener(this);
slidingPaneLayout.setSliderFadeColor(getResources()
.getColor(android.R.color.transparent));

// 左侧的透明视图
View leftView = new View(this);
leftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
slidingPaneLayout.addView(leftView, 0);

ViewGroup decorView = (ViewGroup) getWindow().getDecorView();


// 右侧的内容视图
ViewGroup decorChild = (ViewGroup) decorView.getChildAt(0);
decorChild.setBackgroundColor(getResources()
.getColor(android.R.color.white));
decorView.removeView(decorChild);
decorView.addView(slidingPaneLayout);

// 为 SlidingPaneLayout 添加内容视图
slidingPaneLayout.addView(decorChild, 1);
}
}

protected boolean isSupportSwipeBack() {
return true;
}

@Override
public void onPanelSlide(View panel, float slideOffset) {

}

@Override
public void onPanelOpened(View panel) {
finish();
}

@Override
public void onPanelClosed(View panel) {

}
}

关键代码都有注释,直接看注释吧。

3、使用可滑动删除的基类 Activity
就和定义普通的 Activity 一样,这是需要继承上面的基类,并且在清单文件中使用透明样式:

1
2
3
4
5
6
7
8
public class NextActivity extends BaseSlideCloseActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_next);
}
}

小结

好了,对 SlidingPaneLayout 的介绍就到这里了,SlidingPaneLayout 的使用还是很简单的,但是利用好了可以实现一些看上去可能比较难实现的效果。

项目地址

SlidingPaneLayoutDemo

参考

Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
SlidingPaneLayout的基本使用
Android UI开发第三十四篇——SlidingPaneLayout

坚持原创技术分享,您的支持将鼓励我继续创作!